﻿
<link href="~/lib/layui/css/layui.css" rel="stylesheet" />   @* 一 ①样式 *@ @* ②layui js库 *@
<script src="~/js/js.cookie.js"></script>
<script src="~/js/moment.js"></script>
<script src="~/lib/layui/layui.js"></script>
<script src="~/lib/jquery/dist/jquery.js"></script>

<h2>房型列表</h2>


<table class="layui-table">
    <tr>
        <td>房型</td>
        <td> @* 房间信息 *@  </td>
    </tr>
    <tbody id="roomtype"></tbody>
     
</table>

<script>
    $(function () {
        showRoomType();
    });


    function showRoomType() {
        $.ajax({
            url: 'https://localhost:7061/api/RoomType/GetRoomTypes',
            type: 'get',
            async: false,
            success: function (res) {
                var tr = '';
                $(res).each(function (i,obj) { 
                    tr += `
                              <tr>

                                     <td>
                                         <img src="${obj.imgUrl}" style="width:100px;height:100px;" />
                                         <br />
                                             ${obj.name}
        <a href="#"  onclick="VR('${obj.imgUrl}')"> vr看房</a>

                                         </td>
                                     <td>

                                         <table>
                                                <tbody id="roominfo${obj.id}">
                                            
                                                </tbody>

                                         </table>

                                     </td>
                                 </tr>
                    `;

                    showRoom( obj.id );//传递房型id
                });

                $("#roomtype").html(tr);
            }

        });
    }

    function showRoom(roomTypeId) {
        $.ajax({
            url: 'https://localhost:7061/api/RoomInfo/GetRooms?roomTypeId=' + roomTypeId,//根据传过来的房型id查找对应的房间
            type: 'get',
            success: function (res) {
                var tr = '';
                $(res).each(function (i, obj) {
                    tr += ` <tr>
                            <td>${obj.roomName}</td>
                                <td>${obj.price}</td>
                                <td>${obj.breakFastNum}</td>
                                <td> 
                                
                                
                                <input type="button" id="orderHotel" value="预定" onclick="YuDing(${obj.id})" /> </td>
                        
                    </tr>
                        `;
                });
                $("#roominfo" + roomTypeId).html(tr);
            }
        });
    
    }

    //src是图片路径：/pic/1.png
    function VR(src) {
        layer.open({
            type: 2,
            title: "VR看房",
            shadeClose: false,
            shade: 0.1, // 遮罩透明度
            maxmin: false, //开启最大化最小化按钮
            area: ['1200px', '543px'],
            anim: 0, // 0-6 的动画形式，-1 不开启
            content: '/RoomType/VROne?src=' + src  //把图片传递给VR播放器页面
        });
    }
    

    function YuDing(id) {
        alert("您要预定的房间是id:"+id);

        localStorage["roomid"] = id;
        location.href = "/Order/Order";
    }

</script>

@* <tr>
    <td>总统666</td>
    <td>66666</td>
    <td>8</td>
</tr> *@